					
<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <div class="common-layout">
                    <el-container>
                        <el-form :inline="true" :model="formInline" class="demo-form-inline">
                            <el-form-item style="width:200px;">
                                <el-input v-model="formInline.works" placeholder="链上标识/作品" />
                            </el-form-item>
                            <el-form-item style="width:100px;">
                                <el-select v-model="formInline.type" placeholder="文件类型">
                                    <el-option label="图片" value="pic" />
                                    <el-option label="3D" value="3d" />
                                </el-select>
                            </el-form-item>
                            <el-form-item style="width:100px;">
                                <el-select v-model="formInline.zh" placeholder="文件状态">
                                    <el-option label="未上架" value="noup" />
                                    <el-option label="已上架" value="yup" />
                                    <el-option label="预售中" value="booking" />
                                    <el-option label="出售中" value="saleing" />
                                    <el-option label="已售罄" value="done" />
                                </el-select>
                            </el-form-item>
                            <el-form-item style="width:80px;">
                                <el-button type="primary" @click="reset">重置</el-button>
                            </el-form-item>
                        </el-form>
                        <button class="add">新增</button>
                    </el-container>
                </div>
            </el-header>
            <el-main>
                <div class="common-layout">
                    <el-container style="display: block;">
                       
                            <el-table :data="tableData" style="width: 100%" empty-text="暂无数据"
                                :header-cell-style="{ background: '#EFF0FD', color: '#606266' }">
                                <el-table-column label="ID" prop="ID" width="50" />
                                <el-table-column label="用户信息" prop="nickname" show-overflow-tooltip  />
                                <el-table-column prop="username" label="用户账号" show-overflow-tooltip  />
                                <el-table-column prop="money" label="账户余额" show-overflow-tooltip  />
                                <el-table-column prop="number" label="数字藏品" show-overflow-tooltip  />
                                <el-table-column prop="infor" label="所属邀请" show-overflow-tooltip />
                                <el-table-column prop="zh" label="账号状态" show-overflow-tooltip />
                                <el-table-column prop="date" label="时间" show-overflow-tooltip />
                            </el-table>
                            <div class="bar">
                                <span>总计 <span class="number">0</span> 条数据</span>
                                <el-pagination :page-size="20" :pager-count="11" layout="prev, pager, next"
                                    :total="100" />
                            </div>
                    </el-container>
                </div>
            </el-main>
        </el-container>
    </div>


</template>
                            
<script>
export default {
    name: 'VueWithdrawal',

    data() {
        return {
            formInline: {
                works: '',
                type: '',
                zh: '',
            },
            tableData: [
                {
                    nickname: 'sunshine',
                    username: '19439204223',
                    date: '2022-10-10 23:22:33',
                    money: '1000',
                    number: '12',
                    infor: 'she',
                    zh: '正常',
                }, {
                    nickname: 'sunshine',
                    username: '19439204223',
                    date: '2022-10-10 23:22:33',
                    money: '1000',
                    number: '12',
                    infor: 'she',
                    zh: '正常',
                }
            ]

        };
    },

    mounted() {

    },

    methods: {
        reset() {
            this.formInline = {
                works: '',
                type: '',
                zh: '',
            }
        }
    },
};
</script>
                            
<style lang="css" scoped>
.el-main {
    padding: 0 !important;
}

.el-header {
    height: 50px;
    padding-left: 0;
}


.el-aside {
    overflow: hidden;
}

.el-form-item {
    margin-right: 10px;
}

.flex {
    margin-top: 20px;
}

/* 下方数据 */
.bottom-header {
    height: 370px;

}

.el-table {
    margin-top: 20px;
    box-shadow: 0 0 5px rgb(195, 206, 217);
}

.bottom-bar {
    border-top: 1px solid silver;
}

.el-pagination {
    float: left;
    margin-top: 10px;
}

.bottom-bar>span {
    margin-top: 16px;
    display: inline-block;

}

.add {
    height: 33px;
    margin-left: 300px;
    width: 60px;
    border: none;
    color: #fff;
    border-radius: 5px;
    background-color: red;
    cursor: pointer;
}

.add:hover {
    background-color: rgb(242, 85, 85);
}

.bar {
    border-top: 1px solid silver;
    line-height: 56px;
}

.number {
    color: red;
}
</style>